<!-- 对话框显示树形结构数据，用于分类以及短标题级别的显示 -->
<template>
  <div class="tree-dialog">
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
    >
      <div class="tree-body">
        <el-tree
          :data="data"
          :props="defaultProps"
          :default-expand-all="defaultExpandAll"
        ></el-tree>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '未定义Title'
    },
    data: {
      type: Array
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    defaultExpandAll: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      dialogFormVisible: false
    }
  },
  methods: {
    show () {
      this.dialogFormVisible = true
    },
    hide () {
      this.dialogFormVisible = false
    }
  }
}

</script>

<style scoped>
.tree-body {
  padding-left: 24px;
}
</style>
